<template>
  <div class="app-container height100">
    <div class="menu-navbar">
      <el-button type="success" size="small" @click="edit()" style="z-index: 1;">
        编辑
      </el-button>
    </div>
    <el-form :model="appendlist" label-position="top" size="small" label-width="110px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="机构名称" prop="name">
            <el-input v-model="appendlist.name" placeholder="" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="机构英文名称" prop="nameEn">
            <el-input v-model="appendlist.nameEn" placeholder="" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="机构简称" prop="shortName">
            <el-input v-model="appendlist.shortName" placeholder="" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="机构代码" prop="code">
            <el-input v-model="appendlist.code" placeholder="" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="机构类别" prop="category">
            <el-select v-model="appendlist.category" clearable placeholder="" :disabled="true">
              <el-option
                v-for="item in classifyOptions"
                  :key="item.codeKey"
                  :label="item.codeName"
                  :value="item.codeKey">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="组织机构类别" prop="unitId">
            <el-select v-model="appendlist.unitId" clearable placeholder="" :disabled="true">
              <el-option
                v-for="item in unitIdOptions"
                :key="item.type"
                :label="item.value"
                :value="item.type">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="机构状态" prop="status">
            <el-select v-model="appendlist.status" clearable placeholder="" :disabled="true">
              <el-option
                v-for="item in typeOptions"
                :key="item.type"
                :label="item.value"
                :value="item.type">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="排序号" prop="orderNo">
            <el-input v-model="appendlist.orderNo" type="tel" placeholder="" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="是否是临时" prop="isTemp">
            <el-select v-model="appendlist.isTemp" clearable placeholder="" :disabled="true">
              <el-option
                v-for="item in isTempOptions"
                :key="item.type"
                :label="item.value"
                :value="item.type">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否隐藏" prop="isHidden">
            <el-select v-model="appendlist.isHidden" clearable placeholder="" :disabled="true">
              <el-option
                v-for="item in HiddenOptions"
                :key="item.type"
                :label="item.value"
                :value="item.type">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="企业地址" prop="address">
            <el-input v-model="appendlist.address" placeholder="" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="邮政编码" prop="zipCode">
            <el-input v-model="appendlist.zipCode" placeholder="" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="联系电话" prop="address">
            <el-input v-model="appendlist.telephone" placeholder="" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="电子邮件" prop="email">
            <el-input v-model="appendlist.email" placeholder="" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="备注" prop="remarks">
            <el-input type="textarea" v-model="appendlist.remarks" :rows="2" placeholder="" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!--<el-row :gutter="20">-->
        <!--<el-col :span="6">-->
          <!--<el-form-item label="子公司归口部门" prop="belongOrgId" v-if="appendlist.category ==='1'">-->
            <!--<el-input v-model="belongOrgName" :disabled="true"></el-input>-->
          <!--</el-form-item>-->
        <!--</el-col>-->
      <!--</el-row>-->
    </el-form>
  </div>
</template>

<script>
  import DeployUser from './components/deployUser'
  import {
    orgTreeSelect
  } from '@/api/service'
  export default {
    components: {
      DeployUser
    },
    data() {
      return {
        orgid: '',
        deployVisible: false,
        updateVisible: false,
        appendlist: {},
        belongOrgName: '',
        orgTree: {
          condition: [
            {
              property: 'id',
              value: '',
              type: 'EQ'
            }
          ]
        },
        typeOptions: [
          {
            type: '0',
            value: '活动'
          },
          {
            type: '1',
            value: '禁用'
          },
          {
            type: '2',
            value: '删除'
          }
        ],
        HiddenOptions: [
          {
            type: '0',
            value: '否'
          },
          {
            type: '1',
            value: '是'
          }
        ],
        isTempOptions: [
          {
            type: '0',
            value: '否'
          },
          {
            type: '1',
            value: '是'
          }
        ],
        unitIdOptions: [],
        corpUnitIdOptions: [
          {
            type: '1',
            value: '直属单位'
          },
          {
            type: '2',
            value: '下属单位'
          }
        ],
        deptUnitIdOptions: [
          {
            type: '1',
            value: '部门'
          },
          {
            type: '2',
            value: '机关部门'
          }
        ],
        subsys: {},
        subsyslist: {

        },
        count: 0,
        selectValue: 1,
        classifyOptions: [],
        natureOptions: []
      }
    },
    created() {
      this.fetchData()
      this.GetCodeList()
      this.GetCodeList1()
    },
    watch: {
      // 如果路由有变化，会再次执行该方法
      '$route.name': ['fetchData']
    },
    beforeRouteUpdate(to, from, next) {
      // just use `this`
      next()
      this.fetchData()
    },
    beforeRouteEnter(to, from, next) {
      next(vm => {
        vm.fetchData()
      })
    },
    methods: {
      fetchData() {
        this.loading = true
        this.orgTree.condition[0].value = this.$route.params.id
        this.$store.dispatch('OrgTreeSelect', this.orgTree).then(res => {
          this.appendlist = res.data.records[0]
          if (this.appendlist.belongOrgId !== '' && this.appendlist.belongOrgId !== null) {
            orgTreeSelect({ condition: [
              {
                'property': 'id',
                'value': this.appendlist.belongOrgId,
                'type': 'EQ'
              }
            ] }).then(response => {
                this.belongOrgName = response.data.data.records[0].name
              })
            } else {
              this.belongOrgName = ''
            }

        if (this.appendlist.category === '1'){
          this.unitIdOptions = this.corpUnitIdOptions
        }
        if (this.appendlist.category === '2'){
          this.unitIdOptions = this.deptUnitIdOptions
        }
          // this.subsyslist.condition[0].value = res.data.records[0].subsysid
          // console.log(this.appendlist)
          this.loading = false
        }).catch((err) => {
          console.log(err)
        })
      },
      GetCodeList() {
        let args = {}
        args.codeType = 'ORG_CATEGORY_CODE'
        args.codeStatus = '0'

        this.$store.dispatch('SysCodeListByCodeType', args).then(res => {
          let data = res.data
          if (data && data.length > 0) {
            data.forEach((item, i) => {
              item.id = JSON.stringify({
                'id': item.codeKey,
                'name': item.codeName
              })
            })
          }
          this.classifyOptions = data
          this.loading = false
        }).catch((err) => {
          console.log(err)
        })
      },
      GetCodeList1() {
        let args = {}
        args.codeType = 'ORG_NATURE_CODE'
        args.codeStatus = '0'

        this.$store.dispatch('SysCodeListByCodeType', args).then(res => {
          let data = res.data
          if (data && data.length > 0) {
            data.forEach((item, i) => {
              item.id = JSON.stringify({
                'id': item.codeKey,
                'name': item.codeName
              })
            })
          }
          this.natureOptions = data
          this.loading = false
        }).catch((err) => {
          console.log(err)
        })
      },
      edit() {
        this.$router.push({
          name: 'orgUpdate',
          params: {
            id: this.$route.params.id
          }
        })
      }
    }
  }
</script>
<style scoped>
  .height100{
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .menu-navbar{
    padding:10px;
    text-align: right;
  }
</style>
<style scoped>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: '';
  }

  .clearfix:after {
    clear: both;
  }

  .box-card {
    width: 100%;
  }
</style>
